<template>
  <!-- 推荐奖励配置列表 author:lzeng 2021.5.12 -->
  <div class="main">
    <section class="sign-in-container">
      <div class="title">推荐奖励设置（推荐人钻石和董事得奖励，普通和VIP不得奖励）</div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="form"
      >
        <div class="form_item">
          <div class="remake">邀请好友，好友升级钻石会员</div>
          <div class="content">
            <span>推荐人即得</span>
            <el-input
              v-model="form.userMemberCommissionConfigDTOS[0].reward"
              @input="
                form.userMemberCommissionConfigDTOS[0].reward = oninputMoney(
                  form.userMemberCommissionConfigDTOS[0].reward
                )
              "
            ></el-input>
            <span>元和</span>
            <span>{{form.userMemberCommissionConfigDTOS[0].giftMemberCardNum}}张VIP会员卡，得到后{{form.userMemberCommissionConfigDTOS[0].givingTimeNum}}天无赠送自动过期，好友领取后</span>
            <span>{{form.userMemberCommissionConfigDTOS[0].getTimeNum}}{{getTimeStrByValue(form.userMemberCommissionConfigDTOS[0].getTimeUnit)}}有效。</span>
          </div>
          <div class="content">
            <span>同链路第一个上级董事额为固定得</span>
            <el-input
              v-model="form.userMemberCommissionConfigDTOS[0].firstDirectorReward"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"/>
            <span>元。</span>
          </div>
        </div>
        <div class="form_item">
          <div class="content">
            好友升级后{{form.userMemberCommissionConfigDTOS[1].upgradeRewardExpire}}天内累计成功赠送{{form.userMemberCommissionConfigDTOS[1].upgradeRewardCondition}}张VIP卡（不包含箱起和聚划算）。
          </div>
          <div class="content">
            <span>推荐人再得</span>
            <el-input  v-model="form.userMemberCommissionConfigDTOS[1].reward"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"/>
            <span>元和{{form.userMemberCommissionConfigDTOS[1].giftMemberCardNum}}张VIP会员卡，得到后{{form.userMemberCommissionConfigDTOS[1].givingTimeNum}}天无赠送自动过期，</span>
            <span>好友领取后{{form.userMemberCommissionConfigDTOS[1].getTimeNum}}{{getTimeStrByValue(form.userMemberCommissionConfigDTOS[1].getTimeUnit)}}有效。</span>
          </div>
        </div>
        <el-form-item class="inviteRule" label="邀请规则" prop="inviteRule">
          <el-input
            type="textarea"
            resize="none"
            v-model="form.inviteRule"
            placeholder="邀请规则"
            maxlength="300"
          ></el-input>
        </el-form-item>
        <div class="btn-group" style="margin-top: 10px;">
          <el-button type="primary" @click="save" :loading="btnLoading"
            >保存</el-button
          >
        </div>
      </el-form>
    </section>
  </div>
</template>

<script>
import { oninputMoney } from '../../utils/validate'
export default {
  data() {
    return {
      btnLoading: false,
      form: {
        userMemberCommissionConfigDTOS: [{}, {}]
      },
      rules: {
        inviteRule: [
          { required: true, message: '邀请规则不能为空', trigger: 'blur' },
        ]
      },
      options: [
        {
          value: 1,
          label: '天'
        },
        {
          value: 2,
          label: '月'
        },
        {
          value: 3,
          label: '季'
        },
        {
          value: 4,
          label: '年'
        },
        {
          value: 5,
          label: '终身'
        }
      ],
      dayValues: [],
      accuMoney: 0, // 累计金额
      oninputMoney: oninputMoney
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getTimeStrByValue(value){
      for (let i = 0; i < this.options.length; i++) {
        const element = this.options[i];
        if(element.value === value){
          return element.label
        }
      }
      // return this.options.find((item)=>item.value === value).label
    },
    save() {
      if (this.form.inviteRule == '') {
        this.$message.error('请输邀请规则')
        return
      }
      if (this.form.userMemberCommissionConfigDTOS.length < 1) {
        this.$message.error('请输入奖励设置')
        return
      }
      this.btnLoading = true
      let newForm = {
        userMemberCommissionConfigs: this.form.userMemberCommissionConfigDTOS.slice(
          0,
          2
        ),
        inviteRule: this.form.inviteRule
      }
      for (let i = 0; i < newForm.userMemberCommissionConfigs.length; i++) {
        const element = newForm.userMemberCommissionConfigs[i]
        element.reward = element.reward * 1
        element.giftMemberCardNum = element.giftMemberCardNum * 1
        element.getTimeNum = element.getTimeNum * 1
        element.givingTimeNum = element.givingTimeNum * 1
        element.givingTimeUnit = element.givingTimeUnit * 1
        element.getTimeUnit = element.getTimeUnit * 1
        if (
          !element.giftMemberCardNum ||
          !element.getTimeNum ||
          !element.givingTimeNum
        ) {
          this.$message.error('请输入正整数')
          this.btnLoading = false
          return
        }
        if(!element.reward){
          this.$message.error('请输入大于0的金额')
          this.btnLoading = false
          return
        }
      }
      this.request({
        url: '/bsnl-activity/user/member/commission/config/save',
        method: 'post',
        data: newForm
      })
        .then(res => {
          console.log(res)
          if (res.status == 200) {
            this.$message.success('保存成功')
            this.btnLoading = false
          }
        })
        .catch(err => {
          console.log(err)
          this.btnLoading = false
        })
    },
    getData() {
      this.request({
        url: '/bsnl-activity/user/member/commission/config/list',
        method: 'get'
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.form = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.form_item,
.form_item .remake {
  margin: 20px 0;
}
/deep/ {
  .el-form .el-input,
  .el-form .el-select {
    width: 70px !important;
    margin: 0 5px;
  }
}
.form_item .content {
  line-height: 50px;
}
</style>
